<template>
    <ul>
        <h2 :style={opacity}>欢迎学习Vue</h2>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>

<script>
export default {
    name:'News',
    data(){
        return {
            opacity:1
        }
    },
    beforeDestroy() {
        // 当组件设置了路由缓存，那么在组件销毁时(beforeDestroy)清除定时器就不会管用了，因为组件路由切换掉时
        // 依然不会销毁，因此就引出了另外两个全新的生命周期钩子：activated和deactivated
        // 这些生命周期钩子是路由组件专有的
        // clearInterval(this.timer);
        console.log('News组件被销毁了')
    },
    mounted(){
        // this.timer = setInterval(()=>{
        //     console.log("@");
        //     this.opacity -= 0.01;
        //     if(this.opacity<=0) this.opacity = 1;
        // },16) 
    },
    activated() {
        // activated钩子在当前路由组件激活时触发
        this.timer = setInterval(()=>{
            console.log("@");
            this.opacity -= 0.01;
            if(this.opacity<=0) this.opacity = 1;
        },16) 
    },
    deactivated() {
        // deactivated钩子在当前路由组件失去激活时触发
        clearInterval(this.timer);
    },
}
</script>

<style>

</style>